<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生界面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--css样式-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /*以下是导航栏的css样式*/
        #logo {
            width: 100px;
            height: 80px;
            margin-top: -3px;
            margin-left: 5px;
            vertical-align: middle;
        }

        #header01 {
            background: white;
            position: relative;
        }

        .header01-a {
            color: black;
            line-height: 100px;
            font-size: 30px;
            text-decoration: none;
            margin-left: 20px;
        }

        .header01-a:hover {
            color: orange; /*鼠标悬停时的字体颜色*/
        }

        .header01-b {
            color: black;
            line-height: 100px;
            font-size: 20px;
            text-decoration: none;
            margin-left: 200px;
        }

        .header01-b:hover {
            color: orange; /*鼠标悬停时的字体颜色*/
        }

        #header01-e {
            font-size: 25px;
            margin-left: 400px;
        }

        #header01 ul {
            display: none;
            position: absolute;
            background-color: #fff;
            top: 66px;
            left: 320px;
            list-style: none;
            text-align: center;
            width: 120px;
            z-index: 111;
        }

        .x {
            color: black;
            text-decoration: none;
            line-height: 25px;
            font-size: 15px;
            text-decoration: none;
        }

        .x:hover {
            color: orange; /*鼠标悬停时的字体颜色*/
        }

        #searchTxt {
            height: 35px;
            width: 250px;
        }

        #btn-search {
            height: 34px;
            width: 50px;
        }

        /*以下是div-information的css*/
        #info-div {
            display: inline-block;
            width: 700px;
            background: white;
            position: relative;
            margin-top: 110px;
            margin-left: 300px;
        }

        .info-table td:first-child {
            width: 100px;
            text-align: center;
        }

        .info-table td:last-child {
            text-indent: 20px;
        }

        .info-table caption {
            height: 30px;
            font-size: large;
        }

        #headPhoto {
            width: 300px;
            height: 300px;
            margin-left: 100px;
            margin-top: -300px;
        }

        /*以下是div-updatePwd的css*/
        #div-updatePwd {
            width: 30%;
            height: auto;
            margin: 0 auto;
            margin-top: 13%;
            text-align: center;
            background: #00000060;
            padding: 20px 50px;
        }

        form {
            color: black;
            font-size: 18px;
            font-weight: bolder;
        }

        #div-updatePwd h1 {
            color: yellow;
        }

        #div-updatePwd .form .item {
            margin-top: 15px;
        }

        #div-updatePwd .form .item i {
            font-size: 18px;
            color: #fff;
        }

        #div-updatePwd .form .item input {
            width: 180px;
            font-size: 15px;
            border: 0;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            background: #ffffff00;
            color: #fff;
        }

        #div-updatePwd button {
            margin-top: 20px;
            width: 190px;
            height: 30px;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
            border: 0;
            border-radius: 15px;
        }

        /*以下是食物信息的css代码*/
        .foodInfo-pane {
            height: 280px;
            width: 60%;
            margin-top: 50px;
            margin-left: 300px;
            margin-bottom: 50px;
        }

        .well {
            min-height: 20px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            border: 1px solid #e3e3e3;
            box-sizing: border-box;
        }

        .well-lg {
            padding: 24px;
            border-radius: 6px;
        }

        .food-info {
            margin-left: 80px;
        }

        .volume {
            width: 80px;
            height: 25px;
        }

        .specification {
            width: 80px;
            height: 25px;
        }

        /*分页条的css样式*/
        #div-bar {
            position: fixed;
            bottom: -20px;
            /*left: 50%;*/
            margin-left: 650px;
        }

        /*添加地址的css*/
        #div-addAddress ul {
            position: absolute;
            background-color: #fff;
            top: 70px;
            left: 275px;
            list-style: none;
            text-align: center;
            width: 120px;
        }

        #div-addAddress img {
            width: 300px;
            height: 300px;
            margin-left: 100px;
            margin-top: -300px;
        }

        #panel-table {
            display: inline-block;
            width: 700px;
            background: white;
            position: relative;
            margin-top: 110px;
            margin-left: 300px;
        }

        #table-addAddress td:first-child {
            width: 100px;
            text-align: center;
        }

        #table-addAddress td:last-child {
            text-indent: 20px;
        }

        #table-addAddress caption {
            height: 30px;
            font-size: large;
        }

        #btn-addAddress {
            position: fixed;
            bottom: 100px;
            right: 430px;
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        #div-addAddress input {
            outline: none;
            border: none;
        }

        /*查询收餐地址的css样式*/
        #address-panel {
            width: 40%;
            margin-top: 30px;
            margin-left: 300px;
            padding: 19px;
            background-color: #f5f5f5;
            border: 1px solid #e3e3e3;
            border-radius: 4px;
            float: left;
        }

        #address-panel p {
            margin: 0 0 10px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;

        }

        .btn-deleteAddress {
            right: 430px;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        .btn-setDefaultAddress {
            margin-left: 343px;
            width: 120px;
            height: 30px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        /*购物车的css样式*/
        #bar-pay {
            background: white;
            position: fixed;
            width: 100%;
            bottom: 0;
            height: 60px;
        }

        #btn-creatOrder {
            position: fixed;
            margin-top: 6px;
            right: 40px;
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        #total-price {
            position: fixed;
            margin-top: 4px;
            right: 800px;
            font-size: 40px;
            color: red;
        }

        #btn-clear {
            position: fixed;
            margin-top: 6px;
            right: 200px;
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        .basket-info {
            background: white;
            margin-top: -200px;
            margin-left: 550px;
            height: 270px;
            width: 500px;
            padding: 19px;
            border: 1px solid #e3e3e3;
            border-radius: 4px;
        }

        .btn-minusNum {
            right: 200px;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
            margin-left: 120px;
            font-size: 20px;
        }

        .btn-addNum {
            right: 200px;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
            margin-left: 10px;
            font-size: 20px;
        }

        /*订单界面的css样式*/

        #div-content {
            margin-left: 100px;
            width: 510px;
            height: 650px;
            margin-top: 30px;
            background: white;
        }

        #pane-order {
            margin-left: 60px;
        }

        .td-control {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 4px;
            margin-top: 10px;
        }

        #order-table {
            align-content: center;
        }

        #btn-pay {
            background-color: orangered;
            width: 270px;
            height: 50px;
            float: right;
            margin-right: 10px;
            color: #FFFFFF;
        }

        #address-panelInOrder {
            width: 400px;
            margin-top: 30px;
            padding: 19px;
            background: whitesmoke;
            border: 1px solid whitesmoke;
            border-radius: 4px;
        }

        .btn-choiceAddressInOrder {
            right: 430px;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        #address-panelInOrder p {
            margin: 0 0 10px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;

        }

        #div-order::before, #div-order::after {
            content: '';
            clear: both;
        }

        /*查询历史记录的css样式*/
        #div-barOfHistory {
            position: fixed;
            bottom: -20px;
            margin-left: 650px;
        }

        #div-historyInfo {
            width: 800px;
            height: 510px;
            background: whitesmoke;
            padding: 72px;
            font-size: 16px;
            border-radius: 400px;
            margin-left: 150px;
            margin-top: 40px;
        }

        #div-historyInfo table {
            margin-left: 65px;
        }

        #div-historyInfo td:last-child {
            width: 600px;
        }

        #div-historyInfo table td {
            width: 130px;
        }

        #div-historyInfo table tr {
            height: 40px;
        }

        #div-timeSearch {
            top: 110px;
            position: fixed;
            width: 300px;
            height: 180px;
            background: whitesmoke;
            text-align: center;
            padding: 20px;
            border-radius: 20px;
            margin-left: 1200px;
        }

        #btn-timeSearch {
            margin-top: 10px;
            right: 40px;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        #btn-affirmPay {
            background-color: orangered;
            width: 100px;
            height: 30px;
            margin-right: 10px;
            color: #FFFFFF;
            border-radius: 40px;
        }

        .btn-deleteHistory {
            margin-top: 20px;
            margin-left: 450px;
            right: 40px;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background-color: #ff5000;
            text-align: center;
        }

        /*支付时弹出密码框的css样式*/
        #btn-cancelPay {
            background-color: orangered;
            width: 100px;
            height: 30px;
            margin-right: 10px;
            color: #FFFFFF;
            border-radius: 40px;
        }

        #payPanel {
            background: whitesmoke;
            width: 350px;
            height: 100px;
            text-align: center;
            padding: 20px;
            margin-left: 550px;
            border-radius: 20px;
            position: fixed;
            top: 20px;
        }
    </style>

    <script src="static/js/jquery.js"></script>

    <script>
        var token;
        var u_id;
        var num;
        token = oneValues();
        getUser();
        console.log(token)
        console.log(u_id)

        $(function () {
            // 查询个人信息
            $("#queryMyInformation").click(function () {
                for (let i = 1; i < $("body")[0].children.length; i++) {
                    $("body")[0].children[i].style.display = 'none';
                }
                $("#div-information")[0].style.display = "block";

                $.ajax({
                    headers: {
                        'myToken': token,
                        'Content-Type': 'application/json',
                    },
                    type: "GET",
                    url: "/anyview/user/selectUserByNum?num=" + num,
                    success: function (result) {
                        $("#td-telephone").html(result.data.num);
                        $("#td-name").html(result.data.name);
                        var sexS = "未知";
                        if (result.data.sex == 1) {
                            sexS = "男";
                        }
                        if (result.data.sex == 2) {
                            sexS = "女";
                        }
                        $("#td-sex").html(sexS);
                        $("#td-age").html(result.data.telephone);
                        $("#td-grade").html(result.data.grade);
                        $("#td-class").html(result.data.className);
                    }
                });

            });

            // 导出课表
            $("#queryMyExcel").click(function () {
                window.location.href = "/anyview/course/listCourseInExcel?studentId=" + u_id;
            });

            // 查询选课
            $("#queryChoiceCourse").click(function () {
                for (let i = 1; i < $("body")[0].children.length; i++) {
                    $("body")[0].children[i].style.display = 'none';
                }
                $("#div-queryChoiceCourse")[0].style.display = "block";

                $.ajax({
                    headers: {
                        'myToken': token,
                        'Content-Type': 'application/json',
                    },
                    type: "GET",
                    url: "/anyview/course/queryCourseByGrade?grade=" + 1,
                    success: function (result) {
                        var list = result.data;
                        var txt;
                        for (let i = 0; i < list.length; i++) {
                            var txt2 = '<tr>\n' +
                                '                <th>' + list[i].name + '</th>\n' +
                                '                <th>' + list[i].teacher + '</th>\n' +
                                '                <th>' + list[i].location + '</th>\n' +
                                '                <th>星期' + list[i].weekDay + '</th>\n' +
                                '                <th>第' + list[i].batch + '节</th>\n' +
                                '                <th>' + list[i].maxNum + '人</th>\n' +
                                '                <th>' + list[i].currentNum + '人</th>\n' +
                                '                <th>' + list[i].description + '</th>\n' +
                                '                <th>大' + list[i].grade + '</th>\n' +
                                '                <th>' + list[i].startTime + '</th>\n' +
                                '                <th><button class="preCourse" value=' + list[i].id + '>预选</button></th>\n' +
                                '            </tr>'
                            txt = txt + txt2;
                        }
                        txt = '<tr>\n' +
                            '                <th>课程名</th>\n' +
                            '                <th>教师</th>\n' +
                            '                <th>地点</th>\n' +
                            '                <th>时间</th>\n' +
                            '                <th>节次</th>\n' +
                            '                <th>限选</th>\n' +
                            '                <th>已选</th>\n' +
                            '                <th>描述</th>\n' +
                            '                <th>年级</th>\n' +
                            '                <th>开选时间</th>\n' +
                            '                <th>选择</th>\n' +
                            '            </tr>' + txt;
                        $("#course-table").html(txt);
                        //预选课程
                        for (let i = 0; i < list.length; i++) {
                            $($(".preCourse")[i]).click(function () {
                                $.ajax({
                                    headers: {
                                        'myToken': token,
                                        'Content-Type': 'application/json',
                                    },
                                    type: "POST",
                                    url: "/anyview/course/choiceCourse",
                                    data: {
                                        "studentId": u_id,
                                        "courseId": $(".preCourse")[i].value
                                    },
                                    success: function (result) {
                                        alert(result.message)
                                    }
                                });
                            })
                        }

                    }
                });

            });

            //查询预选
            $("#queryPreCourse").click(function () {
                for (let i = 1; i < $("body")[0].children.length; i++) {
                    $("body")[0].children[i].style.display = 'none';
                }
                $("#div-queryPreCourse")[0].style.display = "block";

                $.ajax({
                    headers: {
                        'myToken': token,
                        'Content-Type': 'application/json',
                    },
                    type: "GET",
                    url: "anyview/course/queryPreCourseByStudentId?studentId=" + u_id,
                    success: function (result) {
                        var list = result.data;
                        var txt;
                        for (let i = 0; i < list.length; i++) {
                            var txt2 = '<tr>\n' +
                                '                <th>' + list[i].name + '</th>\n' +
                                '                <th>' + list[i].teacher + '</th>\n' +
                                '                <th>' + list[i].location + '</th>\n' +
                                '                <th>星期' + list[i].weekDay + '</th>\n' +
                                '                <th>第' + list[i].batch + '节</th>\n' +
                                '                <th>' + list[i].maxNum + '人</th>\n' +
                                '                <th>' + list[i].currentNum + '人</th>\n' +
                                '                <th>' + list[i].description + '</th>\n' +
                                '                <th>大' + list[i].grade + '</th>\n' +
                                '                <th>' + list[i].startTime + '</th>\n' +
                                '                <th><button class="ok-preCourse" value=' + list[i].id + '>确选</button></th>\n' +
                                '                <th><button class="no-preCourse" value=' + list[i].id + '>取消</button></th>\n' +
                                '            </tr>'
                            txt = txt + txt2;
                        }
                        txt = '<tr>\n' +
                            '                <th>课程名</th>\n' +
                            '                <th>教师</th>\n' +
                            '                <th>地点</th>\n' +
                            '                <th>时间</th>\n' +
                            '                <th>节次</th>\n' +
                            '                <th>限选</th>\n' +
                            '                <th>已选</th>\n' +
                            '                <th>描述</th>\n' +
                            '                <th>年级</th>\n' +
                            '                <th>开选时间</th>\n' +
                            '                <th>确选</th>\n' +
                            '                <th>取消</th>\n' +
                            '            </tr>' + txt;
                        $("#preCourse-table").html(txt);
                        //确选课程
                        for (let i = 0; i < list.length; i++) {
                            $($(".ok-preCourse")[i]).click(function () {
                                $.ajax({
                                    headers: {
                                        'myToken': token,
                                        'Content-Type': 'application/json',
                                    },
                                    type: "POST",
                                    url: "anyview/course/affirmCourse",
                                    data: {
                                        "studentId": u_id,
                                        "courseId": $(".ok-preCourse")[i].value
                                    },
                                    success: function (result) {
                                        alert(result.message);
                                        window.location.href="Student.html?token="+token;
                                    }
                                });
                            })
                        }
                        //取消课程
                        for (let i = 0; i < list.length; i++) {
                            $($(".no-preCourse")[i]).click(function () {
                                $.ajax({
                                    headers: {
                                        'myToken': token,
                                        'Content-Type': 'application/json',
                                    },
                                    type: "POST",
                                    url: "/anyview/course/cancelCourse",
                                    data: {
                                        "studentId": u_id,
                                        "courseId": $(".no-preCourse")[i].value
                                    },
                                    success: function (result) {
                                        alert(result.message);
                                        window.location.href="Student.html?token="+token;
                                    }
                                });
                            })
                        }

                    }
                });

            });

        })

        //接收一个值
        function oneValues() {
            var result;
            var url = window.location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {
                result = url.substr(url.indexOf("=") + 1);
            }
            return result;
        }

        //根据token获取user
        function getUser() {
            $.ajax({
                headers: {
                    'myToken': token,
                    'Content-Type': 'application/json',
                },
                type: "GET",
                url: "/anyview/user/getUserByToken",
                data: {
                    "tokenString": token,
                },
                success: function (result) {
                    u_id = result.data.id;
                    num = result.data.num;
                },
                async: false
            });
        }

    </script>
</head>
<body style="background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);padding-bottom: 100px;">

<div id="header01">
    <p>
        <a href="" class="header01-a">选课系统</a>
        <a href="javascript:;" class="header01-b">个人中心</a>
    <ul>
        <li><a class="x" id="queryMyInformation" href="javascript:;">查看个人信息</a></li>
        <li><a class="x" id="queryMyExcel" href="javascript:;">导出我的课表</a></li>
        <li><a class="x" id="queryChoiceCourse" href="javascript:;">查询可选课程</a></li>
        <li><a class="x" id="queryPreCourse" href="javascript:;">查询预选课程</a></li>
    </ul>
    </p>
    <script>
        let ul = document.querySelector('ul');
        let abtn = document.querySelector('.header01-b');
        abtn.addEventListener('mouseenter', function () {
            ul.style.display = 'block';
        });
        abtn.addEventListener('mouseleave', function () {
            ul.style.display = 'none';
        })
        ul.addEventListener('mouseenter', function () {
            ul.style.display = 'block';
        });
        ul.addEventListener('mouseleave', function () {
            ul.style.display = 'none';
        })
    </script>
</div>

<!--查询个人信息界面的最大div-->
<div id="div-information" style="display: none">
    <div id="info-div">
        <table class="info-table" style="border-collapse: collapse; border-right: none;" width="700px" height="300px"
               border="1px">
            <caption>个人信息表</caption>
            <tr>
                <td>学号：</td>
                <td id="td-telephone">未登录
                </td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td id="td-name">未登录
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td id="td-sex">未登录
                </td>
            </tr>
            <tr>
                <td>电话：</td>
                <td id="td-age">未登录
                </td>
            </tr>
            <tr>
                <td>年级：</td>
                <td id="td-grade">未登录
                </td>
            </tr>
            <tr>
                <td>班级：</td>
                <td id="td-class">未登录
                </td>
            </tr>
        </table>
    </div>
</div>

<div id="div-changeInformation" style="display: none">
    <div id="changeInfo-div">
        <table class="info-table" style="border-collapse: collapse; border-right: none;" width="700px" height="300px"
               border="1px">
            <caption>个人信息表</caption>
            <tr>
                <td>学号：</td>
                <td id="td-telephone2">未登录
                </td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td id="td-name2">未登录
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td id="td-sex2">未登录
                </td>
            </tr>
            <tr>
                <td>电话：</td>
                <td id="td-age2">未登录
                </td>
            </tr>
            <tr>
                <td>年级：</td>
                <td id="td-grade2">未登录
                </td>
            </tr>
            <tr>
                <td>班级：</td>
                <td id="td-class2">未登录
                </td>
            </tr>
        </table>
    </div>
</div>

<!--查询我我的课表最大div-->
<div id="div-queryAddress" style="display: none">
</div>

<!--可选课程-->
<div id="div-queryChoiceCourse" style="display: none">
    <div id="div-courses">
        <table class="info-table" style="border-collapse: collapse;background: whitesmoke; border-right: none;"
               width="1500px"
               border="1px" id="course-table">
        </table>
    </div>
</div>

<!--查询预选课程-->
<div id="div-queryPreCourse" style="display: none">
    <div id="div-preCourses">
        <table class="info-table" style="border-collapse: collapse;background: whitesmoke; border-right: none;"
               width="1500px"
               border="1px" id="preCourse-table">
        </table>
    </div>
</div>

</body>

</html>